<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
	<style>
		.alert{
			border:1px solid #a33;
			color:#922;
			background:#fee;
			padding:10px;
		}
		.alert>.close{
			float:right;
			font-weight:bold;
			opacity:.5;
			cursor:pointer;
		}
		.alert>.close:hover{opacity:1}
		.fade{ /*定义淡入淡出动画的初始状态,常驻元素*/
			width:400px; height:100px;
			position:fixed; top:50%; left:50%;
			margin-left:-210px; 
			margin-top:-110px;
			opacity:0;
			overflow:hidden;
			transition:all .5s linear;
		}
		.in{ /*定义淡入淡出动画的结束状态*/
			width:400px; height:100px;
			position:fixed; top:50%; left:50%;
			margin-left:-210px; 
			margin-top:-60px;
			opacity:1
		}
	</style>
 </head>
 <body>
	<button id="btn">click me!</button>
  <div class="alert fade">
		<span class="close">×</span>
		<p>您的浏览器版本太低!请下载最新版本的浏览器</p>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
	  $("#btn").on("click",function(){
			$("div.alert").addClass("in")
		})
		$("span.close").on("click",function(){
			$(this).parent().removeClass("in");
		})
		//程序不变，in不用改，只改fade，实现下沉
		//作业: 中心向四周扩散，卷轴向左右展开，下拉
	</script>
 </body>
</html>
